<template>
<div>
    <ul class="title">
        <li><a href="/">返回</a></li>
        <li>我的</li>
       <li><a href="Login">Login</a></li>
    </ul>
    <div class="nav">
         <img src="../assets/miao.jpg" width="30">
    </div>

    <div class="content">
    
        <div class="i">
            <img src="../assets/1.png" width="30">
            <p>收藏</p>
        </div>

        <div class="i">
            <img src="../assets/2.png" width="30">
            <p>评价</p>
        </div>

        <div class="i">
            <img src="../assets/3.png" width="30">
            <p>记录</p>
        </div>

        <div class="i">
            <img src="../assets/4.png" width="30">
            <p>致电</p>
        </div>

        <div class="i">
            <img src="../assets/5.png" width="30">
            <p>会员</p>
        </div>

        <div class="i">
            <img src="../assets/6.png" width="30">
            <p>卡卷</p>
        </div>
    </div>

    <div class="watermark">
        <span><img src="../assets/bg.png" width="50"></span>
        <span>猫眼电影</span>
    </div>

   <div class="tips">
    <span>发现好电影</span>
   </div>

</div>
</template>

<style lang="less" scoped>
*{
    margin: 0;
    padding: 0; 
}

.title{
background-color: rgba(220,20,60,1);
  color: white;
  display: flex;
  width: 100%;
  justify-content: space-around;
  list-style: none;
  font-size: 0.9rem;

li a{
    text-decoration:none;
    color: white;
}

}

.nav{
  display: flex;
  background-color: rgba(220,20,60,1);
  height: 10rem;
  align-items: center;
  justify-content: center;
.nav img{
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
    }
}

.content{
   height: 12rem;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  align-content: space-around;
  border-bottom: 1px black solid;
  border-radius: 50px;

.i{
  width: 7rem;
  text-align: center;
}

 }

.watermark{
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.2;  
}

.tips{
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0.2; 
}
</style>

<script>
export default {
  data() {
    return {
      src: "/htmlModel"
    };
  },
  created() {},
  methods: {
    clickTo() {
      window.open("/htmlModel", "_blank"); //跳转新页面
    }
    
  }
};
</script>
